<template>
	<view class="content">
		<!-- 编辑状态的时候 这个bgss 是可以替换背景图片的 -->
		<view class="bgss"
			style="background-image:url('https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg')">

		</view>
		<view class="shang">
			<image class="shangimg" mode="widthFix" src="/static/shang.png"></image>
			<view class="neirongs">
				<view v-if="!isshow" class="goodtitle ">{{ detail.name }}[
					<image mode="widthFix" class="xing " src="/static/xing.png"></image>
					{{ detail.tiaojian1 }}
					<image mode="widthFix" class="xing" src="/static/xing.png"></image>{{ detail.tiaojian2 }}
					<image mode="widthFix" class="xing" src="/static/xing.png"></image>{{ detail.tiaojian3 }}]
				</view>
				<view v-if="isshow" class="goodtitle " style="display: flex"> <input style="width:180upx" v-if="isshow"
						class="lanborder" type="text" v-model="detail.name" />[
					<image mode="widthFix" class="xing " src="/static/xing.png"></image>
					<input style="width:100upx" v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian1" />
					<image mode="widthFix" class="xing" src="/static/xing.png"></image> <input style="width:100upx"
						v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian2" />
					<image mode="widthFix" class="xing" src="/static/xing.png"></image> <input style="width:100upx"
						v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian3" />]
				</view>
				<view class="theboxs">
					<view class="t1">
						<text v-if="!isshow">{{ detail.t1 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t1" />
					</view>
					<view class="t2">
						<text v-if="!isshow">{{ detail.t2 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t2" />
					</view>
					<view class="t3">
						<text v-if="!isshow">{{ detail.t3 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t3" />
					</view>
					<view class="t4">
						<text v-if="!isshow">{{ detail.t4 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t4" />
					</view>
					<view class="t5">
						<text v-if="!isshow">{{ detail.t5 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t5" />
					</view>
					<view class="t6">
						<text v-if="!isshow">{{ detail.t6 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t6" />
					</view>
					<view class="t7">
						<text v-if="!isshow">{{ detail.t7 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t7" />
					</view>
					<view class="t8">
						<text v-if="!isshow">{{ detail.t8 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t8" />
					</view>
				</view>
			</view>
		</view>
		<view class="centers">
			<image class="centersimg" mode="widthFix" src="/static/centers.png"></image>
		</view>
		<view class="zhong">
			<image class="zhongimg" mode="widthFix" src="/static/zhong.png"></image>
			<view class="hanglie" v-if="!isshow">
				<view>{{ detail.s1 }}</view>
				<view>{{ detail.s2 }}</view>
				<view>{{ detail.s3 }}</view>
			</view>
			<view class="hanglie" v-if="isshow">
				<view><input class="lanborder" v-model="detail.s1" /></view>
				<view><input class="lanborder" v-model="detail.s2" /></view>
				<view><input class="lanborder" v-model="detail.s3" /></view>
			</view>
		</view>
		<view class="linebox">
			<view class="lines" v-for="(bigitem, index) in detail.itemlist">
				<view class="overs">
					<view class="lefts">
						<text v-if="!isshow">{{ bigitem.leftname }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" v-model="bigitem.leftname" />
						<Text v-if="isshow" style="color: white;background: red;line-height: 50upx;">删除改行</Text>
					</view>
					<view class="rights">
						<text v-if="!isshow">{{ bigitem.rightvalue }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" v-model="bigitem.rightvalue" />
					</view>
				</view>
			</view>
		</view>
		<view class="zhongxai">
			<image class="zhongxaiimg" mode="widthFix" src="/static/zhongxai.png"></image>
		</view>
		<view class="prices" v-if="!isshow">
			<view>每间每晚<text>￥</text><text>{{ detail.price }}</text>
			</view>
		</view>

		<view class="prices" v-if="isshow">
			<view>每间每晚<text>￥</text>
				<input style="float: right;width:100upx" class="lanborder" v-model="detail.price" />
			</view>
		</view>
		<!-- 点击添加明细的时候  detail.itemlist 这个新增一行 -->
		<button class="buttons" v-if="isshow">添加明细</button>
		<button class="saves" v-if="isshow">保存</button>
		<view style="height:160upx" v-if="isshow"></view>
		<view class="bottombtns">
			<image class="bottombtn" mode="widthFix" src="/static/bottombtn.png"></image>
			<view class="postionts">
				<view class="linetos" v-if="!isshow">
					<view class="linethor">{{ detail.yuanjia }}</view>
					<view class="red">￥</view>
					<view class="red niprices">{{ detail.price }}</view>
				</view>
				<view class="linetos" v-if="isshow">
					<view class="linethor"> <input class="lanborder" style="width:100upx;text-align: right;font-size:20upx"
							v-model="detail.yuanjia" /></view>
					<view class="red">￥</view>
					<view class="red niprices"><input class="lanborder"
							style="width:100upx;text-align: right;font-size:30upx" v-model="detail.price" /></view>
				</view>
				<view class="yuouhui">
					<text class="xm" v-if="!isshow">{{ detail.youhui }}</text>
					<text class="xm" v-if="isshow">
						<input class="lanborder" style="width:150upx;font-size:20upx" v-model="detail.youhui" /></text>
					<image class="yiwen" mode="widthFix" src="/static/yiwen.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isshow: true,
			detail: {
				s1: "每间每晚优惠18元，每订单最高优惠18元",
				s2: "每间每晚优惠18元，每订单最高优惠18元",
				s3: "每间每晚优惠18元，每订单最高优惠18元",
				youhui: "3项优惠56",
				yuanjia: '￥175',
				price: 120,
				itemlist: [{ leftname: "房费", rightvalue: "￥50" }, { leftname: "房费", rightvalue: "￥50" }],
				t1: "1张大床1.8米",
				t2: " 20-25㎡",
				t3: "13-23层",
				t4: "有窗",
				t5: "WIFI免费",
				t6: "可吸烟",
				t7: "2人",
				t8: "无早餐",
				name: "丽致影音大床房",
				tiaojian1: "开水壶",
				tiaojian2: "可开税票",
				tiaojian3: "冰箱",
			}
		}
	},
	onLoad() {
	},
	methods: {
	}
}
</script>

<style scopex>
.lanborder {
	border: solid 1px rgb(0, 102, 255);
	color: white;
	background: rgba(34, 34, 34, 0.6);
}

.linethor {
	text-decoration: line-through;
}

.hanglie>view {
	line-height: 55upx;
}

.yiwen {
	display: block;
	width: 25upx;
}

.zhong {

	position: relative;
}

.hanglie {
	position: absolute;
	top: 148upx;
	font-size: 24upx;
	padding-left: 150upx;
	color: #474747;
	box-sizing: border-box;
}

.xm {
	margin-right: 5upx;
}

.yuouhui {
	padding: 0 10upx;
	background: #ffcb06;
	border-radius: 5upx;
	border-bottom-left-radius: 50upx;
	border-top-right-radius: 50upx;
	border-bottom-right-radius: 50upx;
	font-size: 20upx;
}

.niprices {
	font-size: 35upx;
	font-weight: bold;
}

.linetos view {
	line-height: 50upx;
}

.linetos view:nth-child(1) {
	transform: translateY(5upx);
}

.linetos view:nth-child(2) {
	transform: translateY(5upx);
}

.linetos {
	color: #595959;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.red {
	font-weight: bold;
	color: #e02020;
}

.yuouhui {
	display: flex;
	justify-content: center;
	justify-items: center;
}



.bottombtns {
	position: fixed;
	bottom: 0;
	width: 100%;
}

.postionts {
	position: absolute;
	right: 300upx;
	bottom: 25upx;
}

.bottombtn {
	width: 100%;
	display: block;
}

.saves {



	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	background: rgb(0, 64, 153);
	color: white;
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.buttons {

	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	border: solid 1upx rgb(0, 64, 153);
	color: rgb(0, 64, 153);
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.prices {
	text-align: right;
	font-size: 20upx;
	color: #343434;
	padding-right: 20upx;
	background: white;
	margin-top: -10upx;
	padding-bottom: 170upx;
}

.prices text {
	font-weight: bold;
	color: #e02020;
}

.prices text:last-child {
	font-size: 40upx;
	font-weight: bold;
}

.lines:last-child {
	border-bottom: none;
}

.centersimg {
	width: 100%;
}

.centersimgimg {
	width: 100%;
}

.zhongxai {
	width: 100%;
}

.zhongxaiimg {
	width: 100%;
}

.overs {
	font-size: 26upx;
	overflow: hidden;
	padding: 0 30upx;
	line-height: 80upx;
}

.lefts {
	float: left;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.lines {
	border-bottom: solid 1px #f5f5f5;
}

.linebox {
	background: white;
	margin-top: -10upx;
}

.rights {
	float: right;
}

.zhongimg {
	width: 100%;
}

.t1 {
	position: absolute;
	font-size: 23upx;
	left: 65upx;
	top: 28upx
}

.t2 {
	position: absolute;
	font-size: 23upx;
	left: 305upx;
	top: 28upx
}

.t3 {
	position: absolute;
	font-size: 23upx;
	left: 540upx;
	top: 28upx;
}

.t4 {
	position: absolute;
	font-size: 23upx;
	left: 65upx;
	top: 78upx
}

.t5 {
	position: absolute;
	font-size: 23upx;
	left: 305upx;
	top: 78upx
}

.t6 {
	position: absolute;
	font-size: 23upx;
	left: 540upx;
	top: 78upx
}

.t7 {
	position: absolute;
	font-size: 23upx;
	left: 65upx;
	top: 130upx
}

.t8 {
	position: absolute;
	font-size: 23upx;
	left: 65upx;
	top: 180upx
}

.theboxs {
	width: 100%;
	height: 250upx;
	position: relative;
}

.xing {
	width: 30upx;
	transform: translateY(5upx);
}

.goodtitle {
	font-size: 32upx;
	font-weight: bold;
	margin-left: 20upx;
}

.neirongs {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.shang {
	width: 100%;
	position: relative;
}

.shangimg {
	width: 100%;
	margin-top: -20upx;
}

.imgs {
	width: 50upx;
	height: 50upx;
	background: rgba(0, 0, 0, 0.58);
	border-radius: 50%;
	padding: 10upx;
	box-sizing: border-box;
}

.bgss {
	width: 100%;
	height: 350upx;
	background-size: cover;

	background-position: center;
}

.content {
	background: rgb(244, 245, 249);
	min-height: 100vh;
}
</style>
